import React, { useEffect } from 'react';
import { useParams,useHistory } from "react-router-dom";
import { getDetailDataAsync } from './store/actionCreators';
import { useSelector, useDispatch } from "react-redux";
import './Index.scss';
const Index = () => {
  const params = useParams();
  const history=useHistory();
  const info = useSelector((state) => state.detailReducer.DetailList);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getDetailDataAsync({ id: params.id }))
    // eslint-disable-next-line 
  }, [])
  console.log(info);
  return (
    <>
    {
      info.img&&<div style={{ backgroundColor: info.backgroundColor }} className="main">
      <p className="top" onClick={()=>history.push('/home/movies/hot')}>猫眼电影&nbsp;>&nbsp;{info.nm}</p>
      <div className="con">
        <div className="imgbox">
          <img src={info.img.replace(/\/w.h/, '/100.138')} alt="" />
          <img src={info.videourl} alt="" />
        </div>
        <div className="title">
          <h2>{info.nm}</h2>
          <p>{info.cat}{info.ver}</p>
          <p>{info.star}</p>
          <p>{info.pubDesc}</p>
          <button>想看</button>
          <button>收藏</button>
        </div>
      </div>

      {/* <!-- 猫眼评分 --> */}
      <div className="score">
        <div className="top">
          <span>{info.scoreLabel}</span>
          <span>{info.watched}人看过</span>
          <span>{info.wish}想看</span>
        </div>
        <div className="scorem">
          <div className="left">
            <em>{info.sc}</em>
            <p>{info.snum}人评</p>
          </div>
          <div className="center">
          {
            info.distributions.map(item=>
              <dl  key={item.proportion}>
              <dt>{item.movieScoreLevel }</dt>
                    <dd><span style={{width: item.proportion+'%'}}></span></dd>
            </dl>)
          }
          </div>
          <div className="right">
            {info.src}
          </div>
        </div>
      </div>

      {/* < !--简介 --> */}
      < div class="brief" >
        <h2>简介</h2>
        <div>
          {info.dra}
        </div>
      </div >
      <div class="m-photo" >
        <h2>剧照</h2>
        <ul>
          {
            info.photos.map(item => <li key="item">
              <img src={item.replace(/\/w.h/, '/150.100')} alt=""/>
              </li>
              )
            }
        </ul >
      </div >
    </div >
    }
      
    </>
        );
      }
      
export default Index;